```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目技术架构全景</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #2d3748;
            line-height: 1.6;
            background-color: #f8fafc;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
            color: #1a202c;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .tech-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            color: white;
            margin-right: 16px;
            flex-shrink: 0;
        }
        .highlight-box {
            border-left: 4px solid #4f46e5;
            background-color: #f0f4ff;
        }
        .drop-cap:first-letter {
            float: left;
            font-size: 3.5em;
            line-height: 0.8;
            margin-right: 8px;
            margin-top: 4px;
            font-weight: 700;
            color: #4f46e5;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <div class="hero-gradient text-white py-20 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-4">项目技术架构全景</h1>
                <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">现代Web应用的全栈解决方案与最佳实践</p>
                <div class="flex flex-wrap justify-center gap-4 mt-10">
                    <div class="bg-white bg-opacity-20 px-6 py-3 rounded-full font-medium backdrop-blur-sm">Spring Cloud</div>
                    <div class="bg-white bg-opacity-20 px-6 py-3 rounded-full font-medium backdrop-blur-sm">微服务架构</div>
                    <div class="bg-white bg-opacity-20 px-6 py-3 rounded-full font-medium backdrop-blur-sm">自动化部署</div>
                    <div class="bg-white bg-opacity-20 px-6 py-3 rounded-full font-medium backdrop-blur-sm">高性能设计</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <!-- Project Overview -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                    <i class="fas fa-project-diagram text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold">项目概述</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div class="bg-white rounded-xl p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-700">项目目标</h3>
                    <p class="text-gray-700 mb-4">本项目是一个综合性的电子商务平台，解决了传统零售行业数字化转型的痛点，为用户提供便捷的线上购物体验，同时为商家提供高效的后台管理系统。</p>
                    <p class="text-gray-700">通过微服务架构实现了系统的高可用性和可扩展性，支持日均1000-2000的并发请求，上线两个月即获得5万+用户。</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-700">核心价值</h3>
                    <ul class="space-y-3">
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>实现线上线下业务无缝对接</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>提供全渠道购物体验（Web/APP/小程序）</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>自动化的CI/CD流程提高交付效率</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                            <span>完善的监控系统保障业务连续性</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="bg-white rounded-xl overflow-hidden shadow-md mb-8">
                <div class="p-6">
                    <h3 class="text-xl font-semibold mb-4 text-indigo-700">系统架构图</h3>
                    <div class="mermaid">
                        graph TD
                            A[用户端] --> B[API Gateway]
                            B --> C[认证服务]
                            B --> D[商品服务]
                            B --> E[订单服务]
                            B --> F[支付服务]
                            B --> G[搜索服务]
                            C --> H[Redis集群]
                            D --> I[MySQL集群]
                            E --> I
                            F --> J[第三方支付]
                            G --> K[Elasticsearch集群]
                            L[管理后台] --> B
                            M[定时任务] --> E
                            N[消息队列] -->|异步处理| E
                            N -->|异步处理| D
                    </div>
                </div>
            </div>
        </section>

        <!-- Technical Stack -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                    <i class="fas fa-layer-group text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold">技术栈</h2>
            </div>
            
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="tech-icon bg-blue-500">
                            <i class="fas fa-server text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">后端技术</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li>Spring Boot 2.7 + Spring Cloud</li>
                        <li>MyBatis + MyBatis-Plus</li>
                        <li>Spring Security + OAuth2</li>
                        <li>Redis (缓存/分布式锁)</li>
                        <li>RabbitMQ (消息队列)</li>
                        <li>Elasticsearch (搜索)</li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="tech-icon bg-purple-500">
                            <i class="fas fa-desktop text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">前端技术</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li>Vue.js 3 + Vuex + Vue Router</li>
                        <li>Element Plus UI组件库</li>
                        <li>Axios HTTP客户端</li>
                        <li>Webpack构建工具</li>
                        <li>ECharts数据可视化</li>
                        <li>微信小程序原生开发</li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="tech-icon bg-green-500">
                            <i class="fas fa-database text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">数据存储</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li>MySQL 8.0 (主从复制)</li>
                        <li>Redis 6 (集群)</li>
                        <li>Elasticsearch 7 (搜索索引)</li>
                        <li>FastDFS (文件存储)</li>
                        <li>MongoDB (日志存储)</li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="tech-icon bg-yellow-500">
                            <i class="fas fa-network-wired text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">基础设施</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li>Docker + Docker Compose</li>
                        <li>Kubernetes (生产环境)</li>
                        <li>Nginx (负载均衡)</li>
                        <li>Jenkins (CI/CD)</li>
                        <li>Prometheus + Grafana (监控)</li>
                        <li>ELK (日志收集)</li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="tech-icon bg-red-500">
                            <i class="fas fa-shield-alt text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">安全方案</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li>JWT + OAuth2 认证</li>
                        <li>API签名验证</li>
                        <li>XSS/CSRF防护</li>
                        <li>SQL注入防护</li>
                        <li>数据加密传输</li>
                        <li>HTTPS全站加密</li>
                    </ul>
                </div>
                
                <div class="bg-white rounded-lg p-6 card-hover">
                    <div class="flex items-center mb-4">
                        <div class="tech-icon bg-indigo-500">
                            <i class="fas fa-tachometer-alt text-2xl"></i>
                        </div>
                        <h3 class="text-xl font-semibold">性能优化</h3>
                    </div>
                    <ul class="space-y-2 text-gray-700">
                        <li>Redis缓存热点数据</li>
                        <li>MySQL读写分离</li>
                        <li>CDN静态资源加速</li>
                        <li>异步处理非核心流程</li>
                        <li>分库分表策略</li>
                        <li>连接池优化</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Project Highlights -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                    <i class="fas fa-star text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold">项目亮点</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-blue-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-bolt text-blue-600"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold">自动化部署体系</h3>
                            <p class="text-gray-600">从手动部署到Jenkins自动化流水线</p>
                        </div>
                    </div>
                    <div class="ml-12 pl-2">
                        <p class="text-gray-700 mb-3">实现从代码提交到生产环境部署的全自动化流程，包括：</p>
                        <ul class="space-y-2 text-gray-700 pl-5 list-disc">
                            <li>代码质量检查（SonarQube）</li>
                            <li>自动化测试（JUnit + Mockito）</li>
                            <li>多环境部署配置</li>
                            <li>一键回滚机制</li>
                        </ul>
                        <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                            <p class="text-sm font-medium text-gray-600">部署效率提升80%，发布时间从小时级缩短到分钟级</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-purple-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-shopping-cart text-purple-600"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold">高并发订单系统</h3>
                            <p class="text-gray-600">应对秒杀场景的解决方案</p>
                        </div>
                    </div>
                    <div class="ml-12 pl-2">
                        <p class="text-gray-700 mb-3">针对高并发下单场景的多层防护策略：</p>
                        <ul class="space-y-2 text-gray-700 pl-5 list-disc">
                            <li>Redis分布式锁防止超卖</li>
                            <li>消息队列异步处理订单</li>
                            <li>库存预扣减机制</li>
                            <li>令牌桶限流算法</li>
                        </ul>
                        <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                            <p class="text-sm font-medium text-gray-600">支持1000+ TPS，成功处理多次秒杀活动</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-green-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-search text-green-600"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold">智能搜索系统</h3>
                            <p class="text-gray-600">基于Elasticsearch的全文检索</p>
                        </div>
                    </div>
                    <div class="ml-12 pl-2">
                        <p class="text-gray-700 mb-3">实现毫秒级商品搜索体验：</p>
                        <ul class="space-y-2 text-gray-700 pl-5 list-disc">
                            <li>中文分词器优化</li>
                            <li>多字段加权搜索</li>
                            <li>智能补全建议</li>
                            <li>搜索结果高亮</li>
                        </ul>
                        <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                            <p class="text-sm font-medium text-gray-600">搜索响应时间从2s降至200ms以内</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="flex items-start mb-4">
                        <div class="bg-red-100 p-2 rounded-lg mr-4">
                            <i class="fas fa-shield-alt text-red-600"></i>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold">安全防护体系</h3>
                            <p class="text-gray-600">全方位保障系统安全</p>
                        </div>
                    </div>
                    <div class="ml-12 pl-2">
                        <p class="text-gray-700 mb-3">构建多层次安全防护：</p>
                        <ul class="space-y-2 text-gray-700 pl-5 list-disc">
                            <li>XSS/CSRF防护</li>
                            <li>SQL注入拦截</li>
                            <li>敏感数据加密</li>
                            <li>操作日志审计</li>
                        </ul>
                        <div class="mt-4 p-4 bg-gray-50 rounded-lg">
                            <p class="text-sm font-medium text-gray-600">上线后零安全事故，拦截攻击尝试2000+次</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Team & Process -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                    <i class="fas fa-users text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold">团队与流程</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">人员配置</h3>
                    <div class="bg-white rounded-xl p-6 overflow-hidden">
                        <div class="mermaid">
                            pie
                                title 项目团队构成
                                "后端开发" : 4
                                "前端开发" : 2
                                "UI设计" : 1
                                "测试" : 2
                                "产品经理" : 1
                                "移动端" : 2
                                "运维" : 1
                                "项目经理" : 1
                        </div>
                    </div>
                </div>
                
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">开发周期</h3>
                    <div class="bg-white rounded-xl p-6">
                        <div class="space-y-4">
                            <div>
                                <h4 class="font-medium text-gray-700 mb-2">迭代开发模式</h4>
                                <p class="text-gray-600">两周一个小迭代，四周一个大迭代，持续交付价值</p>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-700 mb-2">项目总周期</h4>
                                <p class="text-gray-600">手机APP 7-8个月，Web端项目约1年</p>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-700 mb-2">上线成果</h4>
                                <p class="text-gray-600">上线两个月积累5万+用户，日活跃用户数百</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="bg-white rounded-xl p-6 mb-8">
                <h3 class="text-xl font-semibold mb-4 text-gray-800">服务器架构</h3>
                <div class="mermaid">
                    graph LR
                        subgraph 数据库层
                            A[MySQL x3] -->|主从复制| B[读写分离]
                        end
                        subgraph 缓存层
                            C[Redis x3] -->|集群| D[高可用]
                        end
                        subgraph 搜索层
                            E[Elasticsearch x3] -->|分布式| F[全文检索]
                        end
                        subgraph 文件存储
                            G[FastDFS x2] -->|冗余| H[文件备份]
                        end
                        subgraph 应用层
                            I[Nginx x2] -->|负载均衡| J[Tomcat集群]
                            K[Eureka x3] -->|服务发现| L[微服务]
                            M[RabbitMQ x2] -->|消息队列| N[异步处理]
                        end
                </div>
            </div>
        </section>

        <!-- Technical Details -->
        <section class="mb-16">
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                    <i class="fas fa-code text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold">技术细节</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">MySQL性能监控</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">QPS (每秒查询量)</h4>
                            <p class="text-gray-600 mb-2">QPS = Queries / Seconds</p>
                            <div class="bg-gray-100 p-3 rounded-lg">
                                <code class="text-sm">SHOW STATUS LIKE 'Queries';</code>
                            </div>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">TPS (每秒事务量)</h4>
                            <p class="text-gray-600 mb-2">TPS = (Com_commit + Com_rollback) / Seconds</p>
                            <div class="bg-gray-100 p-3 rounded-lg">
                                <code class="text-sm">SHOW STATUS LIKE 'Com_commit';<br>SHOW STATUS LIKE 'Com_rollback';</code>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">XSS防护方案</h3>
                    <div class="space-y-4">
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">XSS攻击类型</h4>
                            <ul class="list-disc pl-5 text-gray-600 space-y-1">
                                <li>存储型（持久化到数据库）</li>
                                <li>反射型（通过URL参数注入）</li>
                            </ul>
                        </div>
                        <div>
                            <h4 class="font-medium text-gray-700 mb-2">防护措施</h4>
                            <div class="bg-gray-100 p-3 rounded-lg">
                                <code class="text-sm">
                                    // Node.js示例<br>
                                    const xss = require('xss');<br>
                                    const safeHtml = xss('&lt;script&gt;alert("xss")&lt;/script&gt;');
                                </code>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-8 bg-white rounded-xl p-6 card-hover">
                <h3 class="text-xl font-semibold mb-4 text-gray-800">订单模块流程</h3>
                <div class="mermaid">
                    sequenceDiagram
                        participant 前端
                        participant 网关
                        participant 认证服务
                        participant 订单服务
                        participant 支付服务
                        participant 数据库
                        前端->>网关: 提交订单请求
                        网关->>认证服务: 验证Token
                        认证服务-->>网关: 认证结果
                        网关->>订单服务: 转发请求
                        订单服务->>数据库: 查询用户地址
                        订单服务->>数据库: 查询购物车
                        订单服务->>数据库: 创建订单
                        订单服务->>支付服务: 发起支付
                        支付服务-->>订单服务: 支付结果
                        订单服务-->>前端: 订单创建结果
                </div>
            </div>
        </section>

        <!-- FAQ -->
        <section>
            <div class="flex items-center mb-8">
                <div class="bg-indigo-100 p-3 rounded-lg mr-4">
                    <i class="fas fa-question-circle text-indigo-600 text-2xl"></i>
                </div>
                <h2 class="text-3xl font-bold">常见问题</h2>
            </div>
            
            <div class="space-y-4">
                <div class="bg-white rounded-xl p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">如何处理多个设备同时登录问题？</h3>
                    <div class="text-gray-700 space-y-2">
                        <p>1. <strong>Web端</strong>：修改密码后清空所有会话，强制重新登录</p>
                        <p>2. <strong>APP端</strong>：Redis记录设备ID，新登录时通知旧设备下线</p>
                        <div class="mt-3 bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm font-medium text-blue-800">关键实现：基于长连接的消息推送机制和设备唯一标识管理</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">如何保证接口安全性？</h3>
                    <div class="text-gray-700 space-y-2">
                        <p>1. <strong>认证机制</strong>：JWT + OAuth2.0</p>
                        <p>2. <strong>签名验证</strong>：每次请求携带时间戳和签名</p>
                        <p>3. <strong>参数加密</strong>：敏感字段RSA加密传输</p>
                        <p>4. <strong>权限控制</strong>：基于角色的访问控制(RBAC)</p>
                        <div class="mt-3 bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm font-medium text-blue-800">防御措施：防重放攻击、防篡改、防信息泄露</p>
                        </div>
                    </div>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <h3 class="text-xl font-semibold mb-3 text-gray-800">项目中有哪些多线程应用场景？</h3>
                    <div class="text-gray-700 space-y-2">
                        <p>1. 异步消费消息队列数据</p>
                        <p>2. 并行调用多个微服务接口</p>
                        <p>3. 后台批量处理任务（如报表生成）</p>
                        <p>4. 高并发下的资源争用控制</p>
                        <div class="mt-3 bg-blue-50 p-4 rounded-lg">
                            <p class="text-sm font-medium text-blue-800">关键技术：线程池管理、CompletableFuture、分布式锁</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```